<template>
  <div class="myInfo">
    <hmNavBar title="我的资料" path="/home/my"> </hmNavBar>
    <div class="content">
      <mycell
        title="头像"
        :value="userInfo.avatar"
        type="img"
        class="round"
      ></mycell>
      <div class="other-info">
        <mycell title="昵称" :value="userInfo.nickname"></mycell>
        <!-- 备注：因为这里的mycell是自己创建的组件，不是原生的，没有click方法，在后面加上 navtion 修饰符后就可以调用原生的方法 -->
        <mycell
          title="性别"
          @click.native="isShow = true"
          :value="genderObj[userInfo.gender]"
        ></mycell>
        <mycell title="地区" :value="area.city_list[userInfo.area]"></mycell>
        <mycell title="个人简介" :value="userInfo.intro"></mycell>
      </div>
      <van-button color="#fff" block @click="exit">
        <span class="red">退出按钮</span>
      </van-button>
    </div>
    <!-- 性别选择 通过van-popup弹窗 -->
    <van-popup v-model="isShow" position="bottom">
      <!-- 选择框  备注：使用 Object.values(对象)，可以把对象转成数组 -->
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="Object.values(genderObj)"
        :default-index="userInfo.gender"
        @confirm="confirmEvent"
        @cancel="isShow = false"
      >
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
// 导入封装的mycell
import mycell from './mycell'
// 使用mapState获取vuex中的userInfo中的头像信息
// 1.导入 import {mapState} from 'vuex'
// 2.     computed:{...mapState(['userInfo'])}
import { mapState } from 'vuex'
import area from '@/assets/js/area.js' // 导入城市数据
import { removeLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      isShow: false,
      area: area, // import的数据行内不能直接用，要通过data中转一下
      genderObj: {
        0: '保密',
        1: '男',
        2: '女'
      }
    }
  },
  methods: {
    // 选择性别
    confirmEvent (value, index) {
      // 这个方法会拿到选择的值和索引下标
      window.console.log(index)
    },
    // 退出登录
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否退出'
        })
        .then(() => {
          // 清除token
          removeLocal()
          // 修改vuex的登录状态为false
          this.$store.commit('setLoginStatus', false)
          // 跳转到登录页
          this.$router.push('/login')
        })
        .catch(() => {})
    }
  },
  components: {
    mycell
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.myInfo {
  height: 100%;
  background-color: #f7f4f5;
  .content {
    padding: 20px @p15;
  }
  .round {
    border-radius: 10px;
  }
  .other-info {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .red {
    color: red;
  }
}
</style>
